<template>
  <el-card class="statistics-card">
    <template #header>
      <div class="card-header">
        <span>订单统计</span>
      </div>
    </template>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-statistic title="今日订单数" :value="todayOrderCount" />
        <div class="growth-info">
          <span>较昨日增长：</span>
          <span :class="growthClass(todayOrderGrowth)">{{ todayOrderGrowth }}%</span>
        </div>
      </el-col>
      <el-col :span="8">
        <el-statistic title="本月订单数" :value="monthOrderCount" />
        <div class="growth-info">
          <span>较上月增长：</span>
          <span :class="growthClass(monthOrderGrowth)">{{ monthOrderGrowth }}%</span>
        </div>
      </el-col>
      <el-col :span="8">
        <el-statistic title="本年订单数" :value="yearOrderCount" />
        <div class="growth-info">
          <span>较上年增长：</span>
          <span :class="growthClass(yearOrderGrowth)">{{ yearOrderGrowth }}%</span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mt-20">
      <el-col :span="8">
        <el-statistic title="今日成交金额" :value="todayTotalAmount" />
        <div class="growth-info">
          <span>较昨日增长：</span>
          <span :class="growthClass(todayAmountGrowth)">{{ todayAmountGrowth }}%</span>
        </div>
      </el-col>
      <el-col :span="8">
        <el-statistic title="本月成交金额" :value="monthTotalAmount" />
        <div class="growth-info">
          <span>较上月增长：</span>
          <span :class="growthClass(monthAmountGrowth)">{{ monthAmountGrowth }}%</span>
        </div>
      </el-col>
      <el-col :span="8">
        <el-statistic title="本年成交金额" :value="yearTotalAmount" />
        <div class="growth-info">
          <span>较上年增长：</span>
          <span :class="growthClass(yearAmountGrowth)">{{ yearAmountGrowth }}%</span>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { getOrderCountByBrandIdAndTimeRange, getTotalAmountByBrandIdAndTimeRange } from "@/common/net/api";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "OrderStatistics",
  props: {
    brandId: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const todayOrderCount = ref(0);
    const monthOrderCount = ref(0);
    const yearOrderCount = ref(0);
    const todayTotalAmount = ref(0);
    const monthTotalAmount = ref(0);
    const yearTotalAmount = ref(0);

    const todayOrderGrowth = ref(0);
    const monthOrderGrowth = ref(0);
    const yearOrderGrowth = ref(0);
    const todayAmountGrowth = ref(0);
    const monthAmountGrowth = ref(0);
    const yearAmountGrowth = ref(0);

    const growthClass = (growth: number) => {
      return growth > 0 ? "growth-positive" : growth < 0 ? "growth-negative" : "growth-neutral";
    };

    const fetchStatistics = async () => {
      try {
        const todayStart = new Date();
        todayStart.setHours(0, 0, 0, 0);
        const todayEnd = new Date();
        todayEnd.setHours(23, 59, 59, 999);

        const monthStart = new Date();
        monthStart.setDate(1);
        monthStart.setHours(0, 0, 0, 0);
        const monthEnd = new Date();
        monthEnd.setHours(23, 59, 59, 999);

        const yearStart = new Date();
        yearStart.setMonth(0);
        yearStart.setDate(1);
        yearStart.setHours(0, 0, 0, 0);
        const yearEnd = new Date();
        yearEnd.setHours(23, 59, 59, 999);

        const yesterdayStart = new Date(todayStart.getTime() - 24 * 60 * 60 * 1000);
        const yesterdayEnd = new Date(todayStart.getTime() - 1);

        const lastMonthStart = new Date(monthStart.getTime() - 31 * 24 * 60 * 60 * 1000);
        const lastMonthEnd = new Date(monthStart.getTime() - 1);

        const lastYearStart = new Date(yearStart.getTime() - 365 * 24 * 60 * 60 * 1000);
        const lastYearEnd = new Date(yearStart.getTime() - 1);

        const todayOrderRes = await getOrderCountByBrandIdAndTimeRange(
          todayStart.toISOString().replace("Z", ""),
          todayEnd.toISOString().replace("Z", "")
        );
        const monthOrderRes = await getOrderCountByBrandIdAndTimeRange(
          monthStart.toISOString().replace("Z", ""),
          monthEnd.toISOString().replace("Z", "")
        );
        const yearOrderRes = await getOrderCountByBrandIdAndTimeRange(
          yearStart.toISOString().replace("Z", ""),
          yearEnd.toISOString().replace("Z", "")
        );

        const todayAmountRes = await getTotalAmountByBrandIdAndTimeRange(
          todayStart.toISOString().replace("Z", ""),
          todayEnd.toISOString().replace("Z", "")
        );
        const monthAmountRes = await getTotalAmountByBrandIdAndTimeRange(
          monthStart.toISOString().replace("Z", ""),
          monthEnd.toISOString().replace("Z", "")
        );
        const yearAmountRes = await getTotalAmountByBrandIdAndTimeRange(
          yearStart.toISOString().replace("Z", ""),
          yearEnd.toISOString().replace("Z", "")
        );

        const yesterdayOrderRes = await getOrderCountByBrandIdAndTimeRange(
          yesterdayStart.toISOString().replace("Z", ""),
          yesterdayEnd.toISOString().replace("Z", "")
        );
        const lastMonthOrderRes = await getOrderCountByBrandIdAndTimeRange(
          lastMonthStart.toISOString().replace("Z", ""),
          lastMonthEnd.toISOString().replace("Z", "")
        );
        const lastYearOrderRes = await getOrderCountByBrandIdAndTimeRange(
          lastYearStart.toISOString().replace("Z", ""),
          lastYearEnd.toISOString().replace("Z", "")
        );

        const yesterdayAmountRes = await getTotalAmountByBrandIdAndTimeRange(
          yesterdayStart.toISOString().replace("Z", ""),
          yesterdayEnd.toISOString().replace("Z", "")
        );
        const lastMonthAmountRes = await getTotalAmountByBrandIdAndTimeRange(
          lastMonthStart.toISOString().replace("Z", ""),
          lastMonthEnd.toISOString().replace("Z", "")
        );
        const lastYearAmountRes = await getTotalAmountByBrandIdAndTimeRange(
          lastYearStart.toISOString().replace("Z", ""),
          lastYearEnd.toISOString().replace("Z", "")
        );
        console.log(todayOrderRes);
        todayOrderCount.value = todayOrderRes.data || 0;
        monthOrderCount.value = monthOrderRes.data || 0;
        yearOrderCount.value = yearOrderRes.data || 0;
        todayTotalAmount.value = todayAmountRes.data || 0;
        monthTotalAmount.value = monthAmountRes.data || 0;
        yearTotalAmount.value = yearAmountRes.data || 0;

        todayOrderGrowth.value = calculateGrowth(todayOrderCount.value, yesterdayOrderRes.data || 0);
        monthOrderGrowth.value = calculateGrowth(monthOrderCount.value, lastMonthOrderRes.data || 0);
        yearOrderGrowth.value = calculateGrowth(yearOrderCount.value, lastYearOrderRes.data || 0);
        todayAmountGrowth.value = calculateGrowth(todayTotalAmount.value, yesterdayAmountRes.data || 0);
        monthAmountGrowth.value = calculateGrowth(monthTotalAmount.value, lastMonthAmountRes.data || 0);
        yearAmountGrowth.value = calculateGrowth(yearTotalAmount.value, lastYearAmountRes.data || 0);
      } catch (error) {
        ElMessage.error("获取统计数据失败");
        console.error(error);
      }
    };

    const calculateGrowth = (current: number, previous: number) => {
      if (previous === 0) {
        return current > 0 ? 100 : 0;
      }
      return ((current - previous) / previous) * 100;
    };

    onMounted(fetchStatistics);

    return {
      todayOrderCount,
      monthOrderCount,
      yearOrderCount,
      todayTotalAmount,
      monthTotalAmount,
      yearTotalAmount,
      todayOrderGrowth,
      monthOrderGrowth,
      yearOrderGrowth,
      todayAmountGrowth,
      monthAmountGrowth,
      yearAmountGrowth,
      growthClass,
    };
  },
});
</script>

<style scoped>
.statistics-card {
  margin: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.growth-info {
  font-size: 14px;
  color: #606266;
}

.growth-positive {
  color: #67c23a;
}

.growth-negative {
  color: #f56c6c;
}

.growth-neutral {
  color: #e6a23c;
}

.mt-20 {
  margin-top: 20px;
}
</style>
